<template>
  <div>
    <!-- 显示心愿单 -->
    <template v-if="datas">
      <!-- 最外层边框 -->
      <div style="border-bottom: 1px solid gainsboro" 
           v-for="({ title, isNew, explains, img1}, i) in datas.results"
          :key="i">
        <!-- 商品内容 -->
        <div class="box" @click="goto(datas.results[i])">
          <!-- 商品图片 -->
          <img class="box-left" v-src="img1" alt="" />
          <!-- 商品文本区域 -->
          <div class="box-right">
            <!-- 商品名称 -->
            <div class="top">
              <span class="name">{{title}}</span>
              <span class="new"  v-if="isNew == 'true'">NEW</span>
            </div>
            <span class="bom">
            {{explains}}
            </span>
          </div>
        </div>
        <div class="btn2">
          <span @click="checkYy(datas.results[i])">预约</span>
          <span @click="likedel(datas.results[i])">删除</span>
        </div>
      </div>
    </template>
    <!-- 没有添加心愿单 -->
    <div class="notbox" v-if="notbaby">
      <span>你还没有心仪宝贝哟</span>
      <span>请先去<a href="/">挑选</a></span>
    </div>
   <!-- 加载 -->
   <load v-if="load"></load>
  </div>
  
</template>

<script>
// import  Load  from "@/components/load.vue";

export default {
  inject: ["reload"],
  components:{
    Load:()=>import('./load.vue')
  },
  
  data() {
    return {
      datas:null,
      notbaby:true,
      load:false,
      data: {},
      title: {},
    };
  },
  watch:{

  },
  mounted(){
      let params = `author_id=${this.$store.state.uid}`
      // console.log("心仪用户",params);
      this.axios.post("/like", params).then((res) => {
          // console.log("心愿单",res);
          if(res.data.code == 200){
            this.datas = res.data;
            this.notbaby = false
          }else{
            if(res.data.code == 400){
              // console.log(res.data.code );
              this.notbaby = true
            }else{
              this.load = true
            }           
          }
      }); 
  },
  methods: {
    checkYy(index) {
      this.data = index
      let params = `westerndetail_id=${index.westerndetail_id}`
      this.axios.post('/pro_store', params ).then((res)=>{
        if(res.data.code == 200){
          //  console.log(res.data.results[0]);
           this.title = res.data.results[0]
          //  console.log(this.title,'111');
          this.$router.push({
              // 跳转到的页面路径
              path: '/sc',
              // 传递的参数集合
              query: {
                title:this.title,
                data:this.data
                
              }
          })
        }
      })
    },

    //编程跳转到详情，因为详情lid是根据序号，所以等到id值时要减一
    goto(index) {
      // console.log("index:",index['westerndetail_id']);
      let i = parseInt(index['westerndetail_id'])-1
      return this.$router.push("/westernDetail?lid=" + i);
    },

    //删除:
    likedel(index){
      let proid = `like_id=${index['like_id']}`
      // console.log(proid);
      this.axios.post('/like_delete',proid).then((res)=>{
        // console.log("删除",res);
        if(res.data.code == 200){
           // 需要刷新
          this.reload()
          this.notbaby = true
        }
      })
    },

  },
};
</script>

<style lang="scss" scoped>
.notbox {
  width: 100vw;
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 1.2em;
}
.notbox span {
  margin-bottom: 5vw;


}

</style>
<style scoped src="../assets/CSS/wish.css">
</style>